<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Nibbles</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Qt, Nibbles, Qyoto, Visual Basic">
<meta name="description" content="Nibbles">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Nibbles</h1>

<p>
In this part of the Visual Basic Qyoto programming tutorial, we will create a 
Nibbles game clone.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
<b>Nibbles</b> is an older classic video game. It was first created in late 70s.
Later it was brought to PCs. In this game the player controls a snake.
The objective is to eat as many apples as possible. Each time the snake eats an apple,
its body grows. The snake must avoid the walls and its own body. 
</p>


<h2>Development</h2>

<p>
The size of each of the joints of a snake is 10px. The snake is controlled with 
the cursor keys. Initially, the snake has three joints. The game starts immediately. 
When the game is finished, we display "Game Over" message in the center of the window.
</p>

<div class="codehead">board.vb</div>
<pre class="code">
Imports Qyoto

NameSpace BoardSpace

public class Board 
    Inherits QFrame 

    Const WIDTH As Integer = 300
    Const HEIGHT As Integer = 300
    Const DOT_SIZE As Integer = 10
    Const ALL_DOTS As Integer = 900
    Const RAND_POS As Integer = 30
    Const DELAY As Integer = 140

    Dim x(ALL_DOTS) As Integer 
    Dim y(ALL_DOTS) As Integer 

    Dim dots As Integer
    Dim apple_x As Integer
    Dim apple_y As Integer

    Dim left As Boolean = False
    Dim right As Boolean = True

    Dim up As Boolean = False
    Dim down As Boolean = False
    Dim inGame As Boolean = True

    Dim timer As QBasicTimer 
    Dim ball As QImage 
    Dim apple As QImage
    Dim head As QImage


    Public Sub New() 
        
        Me.SetStyleSheet("QWidget { background-color: black }")

        Me.FocusPolicy = Qt.FocusPolicy.StrongFocus

        Try 
            ball = New QImage("dot.png")
            apple = New QImage("apple.png")
            head = New QImage("head.png")
        Catch e As Exception 
            Console.WriteLine("Cannot read images")
            Console.WriteLine(e.Message)
            Environment.Exit(1)
        End Try
        
        
        Me.InitGame()
      
    End Sub


    Private Sub InitGame() 

        dots = 3
      
        For z As Integer = 0 To dots-1 
            x(z) = 50 - z*10
            y(z) = 50
        Next

        Me.LocateApple()

        timer = New QBasicTimer()
        timer.Start(DELAY, Me)
        
    End Sub


    Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent) 

        Dim painter As New QPainter()
        painter.Begin(Me)

        If inGame
            Me.DrawObjects(painter)
        Else 
            Me.GameOver(painter)
        End If
       
        painter.End()
        
    End Sub

    Private Sub DrawObjects(ByVal painter As QPainter) 

        painter.DrawImage(apple_x, apple_y, apple)

        For z As Integer = 0 to dots - 1
            If z = 0
                painter.DrawImage(x(z), y(z), head)
            Else 
                painter.DrawImage(x(z), y(z), ball)
            End If 
        Next
        
    End Sub

    Private Sub GameOver(ByVal painter As QPainter) 
    
        Dim msg As String = "Game Over"
        
        Dim small As New QFont("Helvetica", 12)
        small.SetBold(True)
        Dim metr As New QFontMetrics(small)
        
        Dim textWidth As Integer = metr.Width(msg)
        Dim h As Integer = Me.Height
        Dim w As Integer = Me.Width

        painter.SetPen(New QPen(New QBrush(Qt.GlobalColor.white), 1))

        painter.SetFont(small)
        painter.Translate(New QPoint(w/2, h/2))
        
        Dim text_x As Integer = -textWidth / 2
        Dim text_y As Integer = 0
        
        painter.DrawText(text_x, text_y, msg)
        
    End Sub


    Private Sub CheckApple()

        If x(0) = apple_x And y(0) = apple_y
        
            dots += 1
            Me.LocateApple()
            
        End If
        
    End Sub
 
    Private Sub Move() 

        For z As Integer = dots To 1 Step -1
            x(z) = x(z - 1)
            y(z) = y(z - 1)
        Next

        If left
            x(0) -= DOT_SIZE
        End If

        If right
            x(0) += DOT_SIZE
        End If
            
        If up 
            y(0) -= DOT_SIZE
        End If

        If down 
            y(0) += DOT_SIZE
        End If
            
    End Sub


    Private Sub CheckCollision() 

        For z As Integer = dots To 1 Step -1
            If z > 4 And x(0) = x(z) And y(0) = y(z) 
                inGame = False
            End If
        Next   
    
        If y(0) > HEIGHT 
            inGame = False
        End If
    
        If y(0) < 0 
            inGame = False
        End If
    
        If x(0) > WIDTH 
            inGame = False
        End If

        If x(0) < 0 
            inGame = False
        End If
            
    End Sub
        
    
    Private Sub LocateApple() 
    
        Dim rand As New Random()

        Dim r As Integer = rand.Next(RAND_POS)
        
        apple_x = r * DOT_SIZE
        r = rand.Next(RAND_POS)
        apple_y = r * DOT_SIZE
       
        
    End Sub

    Protected Overrides Sub TimerEvent(ByVal e As QTimerEvent) 
       
        If inGame
            Me.CheckApple()
            Me.CheckCollision()
            Me.Move()
        Else 
            timer.Stop()
        End If

        Me.Repaint()
        
    End Sub
    
    Protected Overrides Sub KeyPressEvent(ByVal e As QKeyEvent)
    
        Dim key As Integer = e.Key()
        
        If key = Qt.Key.Key_Left And Not right
            left = True
            up = False
            down = False
        End If
        
        If key = Qt.Key.Key_Right And Not left 
            right = True
            up = False
            down = False            
        End If
      
        If key = Qt.Key.Key_Up And Not down
            up = True
            right = False
            left = False
        End If
        
        If key = Qt.Key.Key_Down And Not up
            down = True
            right = False
            left = False       
        End If
        
    End Sub    
    
End Class

End Namespace
</pre>

<p>
First we will define some globals used in our game. 
</p>

<p>
The <b class="keyword">WIDTH</b> and <b class="keyword">HEIGHT</b> constants determine 
the size of the Board. The <b class="keyword">DOT_SIZE</b> is the size of the apple and the dot
of the snake. The <b class="keyword">ALL_DOTS</b> constant defines the maximum number of 
possible dots on the Board.
The <b class="keyword">RAND_POS</b> constant is used to calculate a random position of an apple. 
The <b class="keyword">DELAY</b> constant determines the speed of the game.
</p>

<pre class="explanation">
Dim x(ALL_DOTS) As Integer 
Dim y(ALL_DOTS) As Integer 
</pre>

<p>
These two arrays store x, y coordinates of all possible joints of a snake. 
</p>

<p>
The <b class="keyword">InitGame()</b> method initializes variables, loads 
images and starts a timeout function.
</p>

<pre class="explanation">
If inGame
    Me.DrawObjects(painter)
Else 
    Me.GameOver(painter)
End If
</pre>

<p>
Inside the <b class="keyword">PaintEvent()</b> method, we check the <b class="keyword">inGame</b>
variable. If it is true, we draw our objects. The apple and the snake joints. Otherwise we display "Game over"
text.  
</p>

<pre class="explanation">
Private Sub DrawObjects(ByVal painter As QPainter) 

    painter.DrawImage(apple_x, apple_y, apple)

    For z As Integer = 0 to dots - 1
        If z = 0
            painter.DrawImage(x(z), y(z), head)
        Else 
            painter.DrawImage(x(z), y(z), ball)
        End If 
    Next
    
End Sub
</pre>

<p>
The <b class="keyword">DrawObjects()</b> method draws the apple and the joints of the
snake. The first joint of a snake is its head, which is represented by a red circle. 
</p>

<pre class="explanation">
Private Sub CheckApple()

    If x(0) = apple_x And y(0) = apple_y
    
        dots += 1
        Me.LocateApple()
        
    End If
    
End Sub
</pre>

<p>
The <b class="keyword">CheckApple()</b> method checks, if the snake has hit
the apple object. If so, we add another snake joint and call the <b class="keyword">LocateApple()</b> 
method, which randomly places a new apple object. 
</p>

<p>
In the <b class="keyword">Move()</b> method we have the key algorithm of the game. 
To understand it, look at how the snake is moving. You control the head of the snake. 
You can change its direction with the cursor keys. The rest of the joints move
one position up the chain. The second joint moves where the first was, 
the third joint where the second was etc. 
</p>

<pre class="explanation">
For z As Integer = dots To 1 Step -1
    x(z) = x(z - 1)
    y(z) = y(z - 1)
Next
</pre>

<p>
This code moves the joints up the chain. 
</p>

<pre class="explanation">
If left
    x(0) -= DOT_SIZE
End If
</pre>

<p>
Move the head to the left.
</p>

<p>
In the <b class="keyword">CheckCollision()</b> method, we determine if the snake
has hit itself or one of the walls. 
</p>


<pre class="explanation">
For z As Integer = dots To 1 Step -1
    If z > 4 And x(0) = x(z) And y(0) = y(z) 
        inGame = False
    End If
Next   
</pre>

<p>
Finish the game, if the snake hits one of its joints with the head.
</p>

<pre class="explanation">
If y(0) > HEIGHT 
    inGame = False
End If
</pre>

<p>
Finish the game, if the snake hits the bottom of the Board. 
</p>

<p>
The <b class="keyword">LocateApple()</b> method locates an apple randomly 
on the board.
</p>

<pre class="explanation">
Dim rand As New Random()

Dim r As Integer = rand.Next(RAND_POS)
</pre>

<p>
We get a random number from 0 to RAND_POS - 1. 
</p>

<pre class="explanation">
apple_x = r * DOT_SIZE
...
apple_y = r * DOT_SIZE
</pre>

<p>
These line set the x, y coordinates of the apple
object. 
</p>

<pre class="explanation">
If inGame
    Me.CheckApple()
    Me.CheckCollision()
    Me.Move()
Else 
    timer.Stop()
End If
</pre>

<p>
Every 140 ms, the <b class="keyword">TimerEvent()</b> method is called. If 
we are in the game, we call three methods, that build the logic of the game.
Otherwise we stop the timer. 
</p>


<p>
In the <b class="keyword">KeyPressEvent()</b> method of the Board class, we 
determine the keys that were pressed.
</p>

<pre class="explanation">
If key = Qt.Key.Key_Left And Not right
    left = True
    up = False
    down = False
End If
</pre>

<p>
If we hit the left cursor key, we set <b class="keyword">left</b> variable to 
true. This variable is used in the <b class="keyword">Move()</b>
method to change coordinates of the snake object. Notice also, that
when the snake is heading to the right, we cannot turn immediately 
to the left. 
</p>

<div class="codehead">nibbles.vb</div>
<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' In this program, we create
' a Nibbles game clone
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto
Imports BoardSpace

Public Class VBQApp 
    Inherits QMainWindow

    Dim WIDTH As Integer = 250
    Dim HEIGHT As Integer = 150

    Public Sub New()
    
        Me.SetWindowTitle("Nibbles")

        Dim board As New BoardSpace.Board()
        Me.SetCentralWidget(board)

        Me.Resize(310, 310)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In this class, we set up the Nibbles game. 
</p>


<br>
<img src="/img/gui/vbqyoto/nibbles.png" alt="Nibbles">
<div class="figure">Figure: Nibbles</div>

<p>
This was the Nibbles computer game programmed with the Qyoto library and the Visual Basic programming language.
</p>

<hr class="btm">

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 17, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

